<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=u3Y99hhCNVFBkxrGpWMGX9CFnkn4GZAD"></script>
  <!-- <script src="js/jquery.baiduMap.min.js"></script> -->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    a {
      text-decoration: none;
    }

    ul {
      list-style: none;
    }

    body,
    html {
      height: 100%;
      font-family: "微软雅黑";
    }

    .box {
      width: 100%;
      height: 100%;
      /* margin: 40px 0; */
    }

    #container1,
    #container2 {
      width: 100%;
      height: 100%;
    }

    #container3 {
      width: calc(100% - 350px);
      height: 100%;
    }

    .list {
      width: 350px;
      height: 100%;
      background: #FFFFFF;
    }

    .list h3 {
      text-align: center;
      padding: 20px 0 10px;
    }

    #aaaa {
      margin-top: 20px;
      height: calc(100% - 100px);
      overflow: auto;
      font-size: 0;
      padding: 0 10px;
    }

    .list li {
      padding: 6px 10px;
      cursor: pointer;
      margin: 0 5px 10px;
      /*background: url(./img/carIcon.png) no-repeat left 14px center;*/
      /*background-size: 40px auto;*/
      border: 1px solid #dddddd85;
      border-radius: 4px;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      width: 46%;
      display: inline-block;
    }

    .list li a {
      color: #333333;
      font-size: 16px;
      display: block;
      text-align: center;
    }

    .list li.active a {
      color: #449DE1;
    }

    .list li p {
      color: #999;
      font-size: 12px;
      margin-top:4px;
    }

    .title {
      font-size: 14px;
      font-weight: bold;
      color: #cc5522;
    }

    .content {
      font-size: 13px;
      color: #333;
      margin-top: 6px;
    }

    .fl {
      float: left;
    }

    .carNum {
      color: #333;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
    }

    .carNum input {
      padding: 6px 30px 6px 10px;
      border-radius: 4px;
      border: 1px solid #dddddd;
      width: 170px;
    }

    .carNum> div{
      position: relative;
    }
    .search {
      position: absolute;
      top: 0;
      right: 2px;
      width: 28px;
      height: 28px;
      background: url("./img/searchIcon.png") no-repeat center;
      background-size: 100%;
      cursor: pointer;
      z-index: 10;
    }

    .carNum span {
      color: #409EFF;
    }
  </style>
</head>

<body>
<div class="box">
  <div id="container3" class="container fl"></div>
  <div class="fl list">
    <h3>园区车辆列表</h3>
    <div class="carNum">
      <div>
        <input type="text" id="searchInput"/>
        <span class="search"></span>
      </div>
      <p>现有车辆：<span id="carNum">0</span>辆</p>
    </div>
    <ul class="" id="aaaa">

    </ul>
  </div>
</div>
<div id="showdiv" style="height: 80%;width: 70%;position: absolute;top: 0px;background: white;top: 10%;z-index: 99999;left: 15%;overflow: auto;border-radius: 8px;display: none;">
  <span id="formtitle" style="font-size: 20px;display: flex;margin: 10px;justify-content: center;"></span>
  <!--  reportType-->
  <div id="reportType">
    <div id='worker' style="display: none;margin-bottom: 60px;">
      <div>
        <span>审核状态</span>
        <input class="formstate" placeholder="无" readonly/>
      </div>
      <div class="barrier">
        <div>
          <span>登记单位</span>
          <input class="formcompany" placeholder="无" readonly/>
        </div>
        <div>
          <span>通行时间</span>
          <div style="display: flex;width: 70%;">
            <input class="formcomeTime" placeholder="无" readonly/>
            <input class="formoutTime" placeholder="无" readonly/>
          </div>
        </div>
      </div>
      <div class="barrier">
        <div><span>驾驶员</span>
          <input class="formdriveName" placeholder="无" readonly/>
        </div>
        <div><span>部门及职务</span>
          <input class="formdepartment" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>联系电话</span>
          <input class="formphone" placeholder="无" readonly/>
        </div>
        <div><span>车辆型号</span>
          <input class="formcarType" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>车牌号</span>
          <input class="formcarNumber" placeholder="无" readonly/>
        </div>
        <div><span>驾驶证号</span>
          <input class="formdriveCardId" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>行驶证</span>
          <input class="formdrivingLicenseCard" placeholder="无" readonly/>
        </div>
        <div><span>通行期限</span>
          <input class="formpassLoadTime" placeholder="无" readonly/>
        </div>
      </div>
    </div>
    <div id='goods' style="display: none;margin-bottom: 60px;">
      <div class="barrier">
        <div><span>登记单位</span>
          <input class="formcompany" placeholder="无" readonly/>
        </div>
        <div><span>通行时间" prop="passLoadTime">
          <div style="display: flex;width: 70%;">
            <input class="formcomeTime" placeholder="无" readonly/>
            <input class="formoutTime" placeholder="无" readonly/>
          </div>
        </div>
      </div>
      <div class="barrier">
        <div><span>驾驶员</span>
          <input class="formdriveName" placeholder="无" readonly/>
        </div>
        <div><span>联系电话" prop="phone">
          <input class="formphone" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>车牌号</span>
          <input class="formcarNumber" placeholder="无" readonly/>
        </div>
        <div><span>挂车号</span>
          <input class="formtrailerCardId" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>驾驶证号</span>
          <input class="formdriveCardId" placeholder="无" readonly/>
        </div>
        <div><span>行驶证</span>
          <input class="formdrivingLicenseCard" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>运输货物</span>
          <input class="formfreight" placeholder="无" readonly/>
        </div>
        <div><span>车辆最大载重</span>
          <input class="formmaxLoad" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>车辆所属公司</span>
          <input class="formcarCompany" placeholder="无" readonly/>
        </div>
        <div><span>出发地</span>
          <input class="formoriginPlace" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>发货单位</span>
          <input class="formforwardingUnit" placeholder="无" readonly/>
        </div>
        <div><span>收货单位</span>
          <input class="formreceivingUnit" placeholder="无" readonly/>
        </div>
      </div>
    </div>
    <div id='temporary' style="display: none;margin-bottom: 60px;">
      <div class="barrier">
        <div><span>登记单位</span>
          <input class="formcompany" placeholder="无" readonly/>
        </div>
        <div><span>驾驶员</span>
          <input class="formdriveName" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>车牌号</span>
          <input class="formcarNumber" placeholder="无" readonly/>
        </div>
        <div><span>挂车号</span>
          <input class="formtrailerCardId" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>驾驶证号</span>
          <input class="formdriveCardId" placeholder="无" readonly/>
        </div>
        <div><span>车辆所属公司</span>
          <input class="formcarCompany" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>车辆型号</span>
          <input class="formcarType" placeholder="无" readonly/>
        </div>
        <!--        trafficRoute-->
        <div><span>出发地与通行路线</span>
          <input class="formoriginPlace" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>事由</span>
          <input class="formmainContent" type="textarea" placeholder="无" readonly/>
        </div>
        <div><span>同行人员</span>
          <input class="formpeerPersonnel" placeholder="无" readonly/>
        </div>
      </div>
    </div>
    <div id="danger" style="display: none;margin-bottom: 60px;">

      <div>
        <span>登记单位</span>
        <input class="formcompany" placeholder="无" readonly/>
      </div>


      <div>
        <span>进场日期</span>
        <input class="formcomeTime" placeholder="无" readonly/>
      </div>


      <div><span>离场日期</span>
        <input class="formoutTime" placeholder="无" readonly/>
      </div>


      <div><span>通行时间</span>
        <div style="display: flex;width: 70%;">
          <input class="formcomeTime" placeholder="无" readonly/>
          <input class="formoutTime" placeholder="无" readonly/>
        </div>
      </div>

      <div><span>驾驶员</span>
        <input class="formdriveName" placeholder="无" readonly/>
      </div>


      <div><span>驾驶证号</span>
        <input class="formdriveCardId" placeholder="无" readonly/>
      </div>


      <div><span>押运员</span>
        <input class="formescortName" placeholder="无" readonly/>
      </div>


      <div><span>押运员证号</span>
        <input class="formescortCardId" placeholder="无" readonly/>
      </div>


      <div><span>车牌号</span>
        <input class="formcarNumber" placeholder="无" readonly/>
      </div>


      <div><span>行驶证</span>
        <input class="formdrivingLicenseCard" placeholder="无" readonly/>
      </div>


      <div><span>挂车号</span>
        <input class="formtrailerCardId" placeholder="无" readonly/>
      </div>


      <div><span>危险货物运输证</span>
        <input class="formdangerCardId" placeholder="无" readonly/>
      </div>


      <div><span>车辆最大载重</span>
        <input class="formmaxLoad" placeholder="无" readonly/>
      </div>


      <div><span>车辆所属公司</span>
        <input class="formcarCompany" placeholder="无" readonly/>
      </div>


      <div><span>发货单位</span>
        <input class="formforwardingUnit" placeholder="无" readonly/>
      </div>


      <div><span>收货单位</span>
        <input class="formreceivingUnit" placeholder="无" readonly/>
      </div>


      <div><span>出发地</span>
        <input class="formoriginPlace" placeholder="无" readonly/>
      </div>


      <div><span>运输货物</span>
        <input class="formfreight" placeholder="无" readonly/>
      </div>


      <div><span>通行路线</span>
        <input class="formtrafficRoute" placeholder="无" readonly/>
      </div>


      <div><span>审核时间</span>
        <input class="formexamineTime" placeholder="无" readonly/>
      </div>


      <div><span>审核意见</span>
        <input class="formexamineOpinion" placeholder="无" readonly/>
      </div>


      <div><span>备注</span>
        <input class="formremarks" placeholder="无" readonly/>
      </div>


      <div><span>申请人</span>
        <input class="formloginId" placeholder="无" readonly/>
      </div>


      <div><span>联系电话</span>
        <input class="formphone" placeholder="无" readonly/>
      </div>


      <div><span>申请方式</span>
        <input class="formhpage" value="H5" readonly/>
      </div>


      <div><span>最后入场时间</span>
        <input class="formkeepTime" placeholder="无" readonly/>
      </div>


      <div><span>所属单位</span>
        <input class="formunitName" placeholder="无" readonly/>
      </div>


      <div><span>部门及职务</span>
        <input class="formdepartment" placeholder="无" readonly/>
      </div>


      <div><span>事由</span>
        <input class="formmainContent" type="textarea" :autosize="{ minRows: 3, maxRows: 5}" placeholder="无"
               readonly/>
      </div>


      <div><span>同行人员</span>
        <input class="formpeerPersonnel" placeholder="无" readonly/>
      </div>

      <div><span>政策</span>
        <input class="formpolicy" type="textarea" :autosize="{ minRows: 5, maxRows: 8}" placeholder="无"
               readonly/>
      </div>
      <div><span>停用原因</span>
        <input class="formreasonDeactivation" type="textarea" placeholder="无" readonly/>
      </div>
      <div style="height: 40px;"></div>
    </div>
  </div>
  <div class="dialog-footer" onclick="cancel()">
    <a>关闭</a>
  </div>
</div>
<script type="text/javascript">
  // {
  //     id: 1,
  //         lng: 116.276039,
  //     lat: 40.207783,
  //     title: "厦门中山公园",
  //     content: ["地址：北京市新建宫门路19号", "电话：010-62881144"]
  // }, {
  //     id: 2,
  //         lng: 118.095231,
  //         lat: 24.461615,
  //         title: "厦门实验小学",
  //         content: ["地址：北京市后花园风景区", "电话：010-69768087"]
  // }, {
  //     id: 3,
  //         lng: 118.092644,
  //         lat: 24.468522,
  //         title: "厦门光明大厦",
  //         content: ["地址：北京市东城区景山前街4号", "电话：010-65131892"]
  // }, {
  //     id: 4,
  //         lng: 118.106586,
  //         lat: 24.467207,
  //         title: "厦门将军祠",
  //         content: ["地址：北京市东城区天坛东里甲1号", "电话：010-67013036"]
  // }, {
  //     id: 5,
  //         lng: 118.108526,
  //         lat: 24.474245,
  //         title: "厦门古龙商城",
  //         content: ["地址：北京市西城区文津街1号(故宫北)", "电话：010-64040610"]
  // }
  var points = [];

  var resultData;
  $(function () {
    $.ajax({
      url: "/dev-api/app/getAllPoint",
      success: function (result) {
        resultData = result.data;
        usageData()
        // console.error(result.data);
        $('#carNum').text(result.data.length);
        result.data.forEach(function (val,index) {
          var a = {
            id: points.length + 1,
            lng: val.longitude,
            lat: val.latitude,
            title: val.carNumber,
            content: ["车牌：" + val.carNumber + "", "姓名：" + val.driveName + "", "" +index + "" , "电话：" + val.phone + "" , "物品名称：" + val.freight + "" ]
          }
          // $("#aaaa").append("<li><a href=\"javascript:void(0)\">车牌"+val.carNumber+"</a></li>");
          $("#aaaa").append('<li><a href="javascript:void(0)">' + val.carNumber + '</a><p>入园时间' + val.comeTime + '</p></li>');
          points.push(a);

          var point = new BMapGL.Point(val.longitude, val.latitude);
          map.centerAndZoom(point, 15);
          // 创建小车图标
          // var myIcon = new BMapGL.Icon("/img/3Dcar.png", new BMapGL.Size(52, 26));
          var marker = new BMapGL.Marker(point); // 创建标注
          var content = `<b>${a.content[0]}</b><p>${a.content[1]}</p><p>${a.content[3]}</p><p>${a.content[4]}</p><a href="javascript:usageData(${a.content[2]})" style="color: #409EFF;">预约记录</a>`;
          var opts = {
            width: 150, // 信息窗口宽度
            height: 150, // 信息窗口高度
          }
          var infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象
          map.openInfoWindow(infoWindow, point); //开启信息窗口
          marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point); //开启信息窗口
          });


          map.addOverlay(marker); // 将标注添加到地图中
        })
        cl();
      }
    });
  })
  var map = new BMapGL.Map('container3'); // 创建Map实例
  //map.centerAndZoom(new BMapGL.Point(124.880043, 45.076611), 16); // 初始化地图,设置中心点坐标和地图级别
  map.centerAndZoom(new BMapGL.Point(123.44047, 43.53700), 16); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);
  // var map = new BaiduMap({
  //     id: "container3",
  //     level: 16, //  选填--地图级别--(默认15)
  //     zoom: true, // 选填--是否启用鼠标滚轮缩放功能--(默认false)
  //     type: ["地图", "卫星"], // 选填--显示地图类型--(默认不显示)
  //     width: 320, // 选填--信息窗口width--(默认自动调整)
  //     height: 70, // 选填--信息窗口height--(默认自动调整)
  //     titleClass: "title",
  //     contentClass: "content",
  //     showPanorama: false, // 是否显示全景控件(默认false)
  //     showMarkPanorama: true, // 是否显示标注点全景图(默认false)
  //     showLabel: false, // 是否显示文本标注(默认false)
  //     mapStyle: "normal", // 默认normal,可选dark,light
  //     icon: { // 选填--自定义icon图标
  //         url: "img/marker2.png",
  //         width: 34,
  //         height: 94
  //     },
  //     centerPoint: { // 中心点经纬度
  //         lng: 124.823608,
  //         lat: 45.118243
  //     },
  //     index: 3, // 开启对应的信息窗口，默认-1不开启
  //     animate: true, // 是否开启坠落动画，默认false
  //     points: points, // 标注点--id(唯一标识)
  //     callback: function (id) {
  //         $(".list").find("li").eq(id - 1).addClass("active").siblings().removeClass("active");
  //     }
  // });

  // var data = map.getPosition();


  function cl() {
    $("body").on('click','.list li',function () {
      // console.log(points[$(this).data("id")-1].lng, points[$(this).data("id")-1].lat)
      // map.openInfoWindow($(this).data("id"));
      var car = points[$(this).index()];
      console.log(car);
      var point = new BMapGL.Point(car.lng, car.lat);
      map.centerAndZoom(point, 15);
      // 创建小车图标
      // var myIcon = new BMapGL.Icon("/img/3Dcar.png", new BMapGL.Size(52, 26));
      var marker = new BMapGL.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      var content = `<b>${car.content[0]}</b><p>${car.content[1]}</p><p>${car.content[3]}</p><p>${car.content[4]}</p><a href="javascript:usageData(${car.content[2]})" style="color: #409EFF;">预约记录</a>`;
      var opts = {
        width: 150, // 信息窗口宽度
        height: 150, // 信息窗口高度
      }
      var infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象
      map.openInfoWindow(infoWindow, point); //开启信息窗口
      marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
      });
      $(this).addClass("active").siblings().removeClass("active");
    })
  }

  // function cl(id) {
  //     map.openInfoWindow(id);
  // }
</script>
<script>
  function cancel() {
    $("#showdiv").hide();
  }
  function usageData(index) {

    var resultDataOne = resultData[index];
    console.log(resultDataOne);
    for(const key in resultDataOne) {
      $(".form"+key).val(resultDataOne[key]);
      if(key == 'reportType'){
        if(resultDataOne[key] == 'danger'){
          $("#formtitle").html("危化品车辆申请");
          $("#"+resultDataOne[key]).show();
        }else if(resultDataOne[key] == 'worker'){
          $("#formtitle").html("工作人员车辆申请");
          $("#"+resultDataOne[key]).show();
        }else if(resultDataOne[key] == 'goods'){
          $("#formtitle").html("货物运输车辆申请");
          $("#"+resultDataOne[key]).show();
        }else if(resultDataOne[key] == 'temporary'){
          $("#formtitle").html("临时车辆申请");
          $("#"+resultDataOne[key]).show();
        }else {
          $("#formtitle").html("其他预约");
          $("#danger").show();
        }
      }else if(key == 'hpage'){
        if(resultDataOne[key] == 0){
          $("#formhpage").val("APP")
        }else {
          $("#formhpage").val("H5")
        }
      }
      $("#showdiv").show();
    }
  }


  $(".search").click(function () {
    var searchInput = $("#searchInput").val();
    $("#aaaa").html("");
    points = [];
    resultData.forEach(function (val,index) {
      console.log(val);
      if(val.carNumber.indexOf(searchInput)!=-1){
        var a = {
          id: points.length + 1,
          lng: val.longitude,
          lat: val.latitude,
          title: val.carNumber,
          content: ["车牌：" + val.carNumber + "", "用户名：" + val.driveName + "", "" +index + "" , "电话：" + val.phone + "" , "物品名称：" + val.freight + "" ]
        }
        // $("#aaaa").append("<li><a href=\"javascript:void(0)\">车牌"+val.carNumber+"</a></li>");
        $("#aaaa").append('<li><a href="javascript:void(0)">' + val.carNumber + '</a><p>入园时间' + val.comeTime + '</p></li>');
        points.push(a);
        console.log(points);
      }
    })
  })

</script>
<style>
  #reportType{

  }

  #reportType input{
    width: 70%;
    -webkit-appearance: none;
    background-color: #FFFFFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  #reportType span{
    min-width: 150px;
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #reportType>div>div{
    margin: 20px;
  }

  .dialog-footer {
    position: fixed;
    bottom: 10%;
    display: flex;
    background-color: #1890ff;
    border-color: #1890ff;
    justify-content: center;
    align-items: center;
    width: 70%;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 400;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px;
    border-radius: 8px;
    color: white;
  }

  .barrier div{
    margin: 20px 0px;
  }
</style>
</body>

